<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>字符计数器</title>
    <link rel="stylesheet" href="../../bootstrap/bootstrap.min.css">
</head>

<body>
    <div class="container mt-5">
        <h1 class="mb-4">字符计数器</h1>
        <form class="mb-3">
            <div class="form-floating">
                <textarea class="form-control" placeholder="请输入要计数的文本" id="textInput" style="height: 150px"></textarea>
                <label for="textInput">请输入要计数的文本</label>
            </div>
            <div class="form-check mt-3">
                <input class="form-check-input" type="checkbox" id="includePunctuation">
                <label class="form-check-label" for="includePunctuation">
                    包括标点符号
                </label>
            </div>
        </form>
        <button type="button" class="btn btn-primary" onclick="countCharacters()">计算</button>
        <div class="mt-4">
            <p>英文字母数量：<span id="englishCount">0</span></p>
            <p>汉字数量：<span id="chineseCount">0</span></p>
            <p>数字数量：<span id="numberCount">0</span></p>
            <p>字符总数：<span id="totalCount">0</span></p>
        </div>
    </div>
    <script>
        function countCharacters() {
            // 获取输入文本框中的文本内容
            const textInput = document.getElementById("textInput").value;

            // 获取是否包括标点符号的复选框状态
            const includePunctuation = document.getElementById("includePunctuation").checked;

            // 统计汉字、英文字母、数字和字符总数
            let chineseCount = 0;
            let englishCount = 0;
            let numberCount = 0;
            let totalCount = 0;

            for (let i = 0; i < textInput.length; i++) {
                const charCode = textInput.charCodeAt(i);
                if (charCode >= 0x4e00 && charCode <= 0x9fa5) { // 汉字Unicode编码范围
                    chineseCount++;
                    totalCount++;
                } else if ((charCode >= 65 && charCode <= 90) || (charCode >= 97 && charCode <= 122)) { // 英文字母Unicode编码范围
                    englishCount++;
                    totalCount++;
                } else if (charCode >= 48 && charCode <= 57) { // 数字Unicode编码范围
                    numberCount++;
                    totalCount++;
                } else if (includePunctuation && ((charCode >= 32 && charCode <= 47) || (charCode >= 58 && charCode <= 64) || (charCode >= 91 && charCode <= 96) || (charCode >= 123 && charCode <= 126) || (charCode >= 0x3000 && charCode <= 0x303f) || (charCode >= 0x2000 && charCode <= 0x206f) || (charCode >= 0x2010 && charCode <= 0x2017) || (charCode >= 0x2018 && charCode <= 0x201f) || (charCode >= 0x2020 && charCode <= 0x2027) || (charCode >= 0x2030 && charCode <= 0x203e) || (charCode >= 0x2041 && charCode <= 0x2053) || (charCode >= 0x2055 && charCode <= 0x205e) || (charCode >= 0x2e80 && charCode <= 0x2eff) || (charCode >= 0xff01 && charCode <= 0xff0f) || (charCode >= 0xff1a && charCode <= 0xff20) || (charCode >= 0xff3b && charCode <= 0xff40) || (charCode >= 0xff5b && charCode <= 0xff65))) {
                    // 标点符号Unicode编码范围（包括中文标点符号）
                    totalCount++;
                }

            }

            // 更新页面显示的统计结果
            document.getElementById("englishCount").innerHTML = englishCount;
            document.getElementById("chineseCount").innerHTML = chineseCount;
            document.getElementById("numberCount").innerHTML = numberCount;
            document.getElementById("totalCount").innerHTML = totalCount;
        }

    </script>

</body>

</html>